<template>
    <div class="add-price">
        <el-form-item label="商品规格" required>
            <el-radio-group v-model="value.spec_type">
                <el-radio :label="1">单规格</el-radio>
                <el-radio :label="2">多规格</el-radio>
            </el-radio-group>
        </el-form-item>
        <specification v-model="value" v-show="value.spec_type == 2" :unitlist="unitlist" />
        <div v-show="value.spec_type == 1">
            <u-table
                size="mini"
                max-height="600"
                :row-height="75"
                tooltip-effect="dark"
                :border="false"
                big-data-checkbox
                use-virtual
                :data="['']"
            >
                <u-table-column label="供货价(元)" align="center">
                    <template #default>
                        <el-input placeholder="请输入供货价" v-model="value.specs_single.cost_price" />
                    </template>
                </u-table-column>
                <u-table-column label="零售价(元)" align="center">
                    <template #default>
                        <el-input placeholder="请输入零售价" v-model="value.specs_single.sell_price" />
                    </template>
                </u-table-column>
                <u-table-column label="划线价(元)" align="center">
                    <template #default>
                        <el-input placeholder="请输入划线价" v-model="value.specs_single.lineation_price" />
                    </template>
                </u-table-column>
                <u-table-column label="单位" align="center">
                    <template #default>
                        <el-select v-model="value.specs_single.unit_id">
                            <el-option
                                v-for="(item, index) in unitlist"
                                :key="index"
                                :label="item.name"
                                :value="item.id"
                            />
                        </el-select>
                    </template>
                </u-table-column>
            </u-table>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import MaterialSelect from '@/components/material-select/index.vue'
import Specification from './specification.vue'
import { apiGoodsUnitList } from '@/api/goods'
@Component({
    components: {
        MaterialSelect,
        Specification
    }
})
export default class AddPrice extends Vue {
    @Prop() value: any
    @Prop() specData!: any
    unitlist: any[] = []
    mounted() {
        apiGoodsUnitList({}).then(res => {
            console.log(res)
            this.unitlist = res
        })
    }
}
</script>

<style scoped lang="scss">
.add-price {
    .ls-input {
        width: 240px;
    }
}
</style>
